<template>
	<view class="good-box">
		<image :src="list.image" mode=""></image>
		<view class="good-title">
			<text class="good-tags">自营</text>
			<uv-text class="good-name" :lines="2" :text="list.name"></uv-text>
		</view>
		<view class="limit-time">
			<view class="limit-star">
				<svg t="1744079940674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8988" width="12" height="12"><path d="M548.2 93l98.4 199.4c6.2 12.5 18.1 21.2 32 23.2l220 32c34.8 5.1 48.7 47.9 23.5 72.4L762.9 575.2c-10 9.8-14.6 23.8-12.2 37.6l37.6 219.1c5.9 34.7-30.5 61.1-61.6 44.8L529.9 773.2c-12.4-6.5-27.2-6.5-39.5 0L293.5 876.7c-31.2 16.4-67.6-10.1-61.6-44.8l37.6-219.1c2.4-13.8-2.2-27.8-12.2-37.6L98.1 420c-25.2-24.6-11.3-67.4 23.5-72.4l220-32c13.8-2 25.8-10.7 32-23.2L472 93c15.6-31.6 60.6-31.6 76.2 0z" p-id="8989" fill="#ffffff"></path></svg>
			</view>
			<view class="limit-text">
				<text>限时活动</text>
			</view>
		</view>
		<view class="limit-price">
			<text class="discount-price">¥{{list.price}}</text>
			<text class="origin-price">¥&nbsp;{{list.originalPrice}}</text>
		</view>
		<view class="limit-cart">
			<uv-icon name="shopping-cart" color="#fff" size="28"></uv-icon>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		list: {
			type: Object,
			required: true,
			default: () => []
		}
	})
</script>

<style lang="scss" scoped>
	.good-box{
		width: 334rpx;
		height: 598rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 0 20rpx;
		position: relative;
		image{
			width: 100%;
			height: 334rpx;
		}
		.good-title{
			position: relative;
			.good-tags{
				position: absolute;
				left: 0;
				top: 10rpx;
				font-size: 24rpx;
				width: 64rpx;
				height: 34rpx;
				background-color: #fe6a5e;
				border-radius: 4rpx;
				line-height: 1;
				padding: 2rpx 8rpx;
				color: white;
			}
			.good-name{
				text-indent: 78rpx;
				font-size: 28rpx
			}
		}
		.limit-time{
			display: flex;
			margin: 16rpx 0;
			.limit-star{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 32rpx;
				height: 32rpx;
				background-color: #d59e44;
				border-radius: 5rpx;
			}
			.limit-text{
				height: 32rpx;
				border: 1px solid #d59e44;
				color: #d59e44;
				padding: 4rpx 8rpx;
				font-size: 20rpx;
				line-height: 1;
			}
		}
		.limit-price{
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			color: #81869a;
			.discount-price{
				font-size: 40rpx;
				font-weight: bold;
				color: #fe6a5e;
			}
			.origin-price{
				text-decoration-line: line-through;
			}
		}
		.limit-cart{
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 30rpx;
			bottom: 30rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #ff685d;
		}
	}
</style>